<template>
  <div class="dispose">
    <el-dialog
      title="新增"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"
      
      >
      <div style="max-width:1000px;margin:auto;">

    <h4>基本信息</h4>
    <table class="table" rules="all" border="1">
      <tr>
        <td>处理时间</td>
        <td>
          <el-date-picker
            value-format="yyyy-MM-dd hh:mm:ss"
            v-model="destailForm.processingDatetime"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </td>
        <td>处理人</td>
        <td>
          <el-input v-model="userName" :disabled="true"></el-input>
        </td>
        <td>处理结果</td>
        <td>
          <el-select v-model="destailForm.processingResults" placeholder="请选择">
            <el-option
              v-for="item in [{
                id:'1',name:'未查明原因'},{id:'2',name:'需返厂'
              },{id:'3',name:'申请物料'},{id:'4',name:'需转交'},{id:'5',name:'已解决'}]"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>处理内容</td>
        <td colspan="5">
          <el-input type="textarea" :rows="2" v-model="destailForm.processingContent"></el-input>
        </td>
      </tr>
    </table>
    <h4>设备图片</h4>
    <el-upload
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess"
        :show-file-list="false"
        >
      <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
    </el-upload>
    <div class="unloadBox">
      <div class="img" v-for="(item,index) in destailForm.drfradList">
        <el-image :src="baseUrl()+item.accessoryUrl" :preview-src-list="[baseUrl()+item.accessoryUrl]"></el-image>
        <i class="el-icon-close" @click="imgDel(index,item.accessoryUrl)"></i>
      </div>
    </div>
    <h4>维修费用
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="cost">添加</el-button>
    </h4>
    <el-table :data="destailForm.drfrcdList" border style="width:934px">
      <el-table-column label="名称" prop="deviceName"/>
      <!-- <el-table-column label="使用人" prop="user"/> -->
      <el-table-column label="数量" prop="number" width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" :min="0"  :controls="false" @change="sum(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="单价" prop="unitPrice" width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.unitPrice" :min="0"  :controls="false" @change="sum(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">{{scope.row.subtotal}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="dele(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="total" style="width:934px">总计：{{total}}</div>
    <div class="btn">
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
      </div>
    </el-dialog>
    <costDialog v-if="costDialog" @selectChange="currentChange"></costDialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
  import costDialog from "@/views/conserve/conserveTask/costDialog";
  import {reportRepairDes,repairHistroyAdd} from '@/api/repair/index'
  export default {
    components:{
      costDialog
    },
    props:['info'],
    name: "dispose.vue",
    data() {
      return {
        userName:Cookies.get("username"),
        form: {},
        imageList:[],
        costDialog:false,
        selectData:'',
        destailForm:{
          drfrcdList:[],
          drfradList:[]
        },
        total:0,
        centerDialogVisible:true
      }
    },
    created(){
      this.getData()
    },
    methods:{
      close(){
        this.$emit('subSetChane')
      },
      getData(){
        reportRepairDes(this.info.id).then((res)=>{
          if(res.code==200){
            this.form.reportForRepairOddNumber=res.data.oddNumber
            this.destailForm.drfrcdList=res.data.drfrcdList
          }
        })
      },
      fileSuccess(res) {
        //文件上传成功
        this.destailForm.drfradList.push({ accessoryName: res.fileName, accessoryUrl: res.filePath})
      },
      async imgDel(index,filePath){
        //删除图片
        for(let i=0;i<this.destailForm.drfradList.length;i++){
          if(index==i){
            if(this.destailForm.drfradList[i].id){
              await fileDeleteLibrary(this.destailForm.drfradList[i].id)
            }else{
              await fileDelete(this.destailForm.drfradList.filePath);
            }
            this.destailForm.drfradList.splice(i, 1);
          }
        }
      },
      //费用
      cost(){
        this.costDialog=true
      },
      //成功回调
      currentChange(data){
        if(data){
          // this.destailForm.drfrcdList=[]
          data.forEach((i,index)=>{
            this.destailForm.drfrcdList.push({
              deviceName:i.dictLabel,
              number:0,
              unitPrice:0,
              subtotal:0,
              expenseCategory:2,
              // user:null,
              // conservetaskid:null,
              id:i.dictCode
            })
        })
        }
        this.costDialog=false
      },
      sum() {
        this.total=0
        this.destailForm.drfrcdList.forEach((item,index)=>{
          this.$set(item,'subtotal',item.number*item.unitPrice)
          this.$set(this.destailForm.drfrcdList,index,item)

          this.total+=item.subtotal
          
        })
      },
      dele(index, row) {
        this.destailForm.drfrcdList.splice(index, 1)
        this.$message.success('删除成功')
        this.sum()
      },
      submit(){
        //提交
        this.destailForm.isHalt=1
        this.destailForm.reportForRepairOddNumber=this.info.odd
        
        repairHistroyAdd(this.destailForm).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
            // this.$router.push({path:"/maintain/myMaintain"})
            this.$emit('subSetChane',1)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .dispose {
    margin-left:20px;
    h4 {
      color: #05A380;
    }
    .total{
      text-align: right;
      margin-right:10px;
      margin-top:10px;
    }
    .img {
      width: 900px;
      min-height: 50px;
      margin-top: 20px;
    }
    .btn {
      width: 900px;
      text-align: center;
      margin-top: 20px;
    }

    .table {
      margin-left: 15px;
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;

      .el-input--medium .el-input__inner, .el-textarea .el-textarea__inner {
        border: none;
      }

      tr {
        td:nth-child(2n-1) {
          width: 100px;
          text-align: center;
        }

        td {
          width: 200px;
          line-height: 35px;

          .red {
            padding: 0 3px;
            color: red;
          }
        }
      }
    }
    .unloadBox{
      width: 934px;
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
  }
</style>
